import { chooseDay, chooseList, bookDay, report } from "./request.js";
let data = {};
let skChase = document.querySelector('.sk-chase');
let shade = document.querySelector('.shade');
data.token = sessionStorage.getItem("token");
//第一次渲染
async function getData() {
    // await 后面写的是异步操作
    //一定等await 执行完毕之后，整个getData函数才能往下执行
    let res = await chooseList(data);
    //获取当前日期并渲染
    let day = document.querySelector('.day');
    //获取内容盒子
    let timeLists = document.querySelector('.time-lists');
    day.innerHTML = res.result.list[0].day_time;
    subscribe(data, timeLists, day);
    //获取选择框和弹出框
    let selectBox = document.querySelector('.select');
    let coverBox = document.querySelector('.cover');
    res.result.list.forEach(function (ele, index) {
        if (index == 0) {
            coverBox.innerHTML += `
        <div class="select-time">
            <div class="time">${ele.day_time}</div>
            <input type="radio" name="time" checked>
         </div>
        `
        } else {
            coverBox.innerHTML += `
        <div class="select-time">
            <div class="time">${ele.day_time}</div>
            <input type="radio" name="time">
         </div>
        `
        }
    });
    // 选择日期
    coverBox.firstElementChild.lastElementChild.checked = true;
    selectBox.addEventListener('click', function (e) {
        e.stopPropagation();
        coverBox.style.transform = `scale(1)`;
    })
    //点击弹出框其他地方缩小弹框
    document.body.addEventListener('click', function () {
        coverBox.style.transform = `scale(0)`;
    })
    //选择相应日期重新加载
    coverBox.addEventListener("click", async function (e) {
        skChase.style.display = "block";
        if (e.target.children.length) {
            let radio = e.target.querySelector('input[type="radio"]');
            radio.checked = true;
            day.innerHTML = e.target.firstElementChild.innerHTML;
        } else {
            let radio = e.target.parentNode.querySelector('input[type="radio"]');
            radio.checked = true;
            day.innerHTML = e.target.parentNode.firstElementChild.innerHTML;
        }
        subscribe(data, timeLists, day);
    })
}
getData();

//渲染 预约场次
async function subscribe(data, timeLists, day) {
    data.day_time = day.innerHTML;
    let res = await chooseDay(data);
    let data2 = {};
    data2.phone = sessionStorage.getItem("phone");
    data2.name = sessionStorage.getItem("name");
    let res2 = await report(data2)
    skChase.style.display = "none";
    let nowTime = new Date().getTime();
    timeLists.innerHTML = "";
    res.result.list.forEach(function (ele) {
        let selectDay = ele.day_time + " " + ele.show_name.split('-')[0] + ":00";
        selectDay = new Date(selectDay).getTime();
        let str = '<button class="orderBtn">可预约</button>';
        res2.result.forEach(function (item) {
            if (item.day_time == ele.day_time) {
                str = '<div class="condition">本日已预约</div>';
            }
        })
        if (selectDay > nowTime) {
            timeLists.innerHTML += `
                <div class="list" show_id="${ele.show_id}">
                        <div class="time-quantum">${ele.show_name}</div>
                        ${str}
                    </div>
                `
        } else {
            timeLists.innerHTML += `
                <div class="list" show_id="${ele.show_id}">
                        <div class="time-quantum">${ele.show_name}</div>
                        ${str}
                    </div>
                `
        }
    })
    //给按钮绑定点击事件，预约场次
    let btns = timeLists.querySelectorAll('button');
    //获取提示盒子
    let verify = document.querySelector('.verify');
    //获取确认时间和日期的两个盒子
    let subscribeDate = verify.querySelector('.subscribe-date');
    let subscribeTime = verify.querySelector('.subscribe-time');
    // 获取取消预约按钮
    let cancelBtn = verify.querySelector('.cancel-btn');
    //获取确认按钮
    let ackBtn = verify.querySelector('.ack-btn');
    btns.forEach(function (ele) {
        ele.addEventListener('click', function () {
            subscribeDate.innerHTML = `日期:${day.innerHTML}`;
            subscribeTime.innerHTML = `时间:${ele.previousElementSibling.innerHTML}`;
            verify.style.transform = `scale(1)`;
            shade.style.display = 'block';
            data.show_id = ele.parentNode.getAttribute('show_id');
        })
    })
    //取消预约，缩小盒子
    cancelBtn.addEventListener('click', function () {
        verify.style.transform = `scale(0)`;
        shade.style.display = 'none';
    })
    //确认预约，发送请求
    ackBtn.onclick = async function () {
        skChase.style.display = "block";
        verify.style.transform = `scale(0)`;
        shade.style.display = 'none';
        res = await bookDay(data);
        let selectTime = res.result.day_time.split('-')
        switch (res.result.show_id) {
            case "1":
                selectTime.push("9:00");
                break;
            case "2":
                selectTime.push("12:00");
                break;
            case "3":
                selectTime.push("14:30");
                break;
        }
        sessionStorage.setItem("seeTime", JSON.stringify(selectTime));
        sessionStorage.setItem("id", res.result.id);
        sessionStorage.setItem('name', res.result.name);
        skChase.style.display = "none";
        location.href = 'success.html';
    }
}
